import React from "react";
import { Button, Form } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from "antd/lib/form/Form";
import ImgViewer from '@/components/ImgViewer';
import Entrance from './formEntrance';
import elec from '@/assets/images/archives/elec.png';
import elecSel from '@/assets/images/archives/elecSel.png';
import paper from '@/assets/images/archives/paper.png';
import paperSel from '@/assets/images/archives/paperSel.png';
import Outdoors from './outdoors';
import Indoors from './indoors';
import Spray from './spray';
import Gas from './gas';
import Foam from './foam';
import FireReport from './firereport';
import EmitSmoke from './emitsmoke';
import PreventSmoke from './preventsmoke';
import OtherSys from './other';
import Resource from '@/components/Resource';

interface IProps extends FormComponentProps {
  dispatch?: Function;
  children?: React.ReactNode;
  loading?: boolean;
  dict?: any;
  tabsKey: string;
  data?: {
    waterPipeQuantity: string;
    poolCapacity: string;
    outdoorFireHydrantQuantity: string;
    isEnable: string;
    waterPipeDiameter: string;
    outdoorNetDiameter: string;
    waterSupplyStatus: string;
    dutyDepartment: string;
    dutyName: string;
    remark: string;
    url: string;
  };
  file?: {
    message: string;
    url: string;
  },
  imageValue?: {
    url: string;
    message: string;
  };
}

@connect(({ upload, loading }) => ({
  loading: loading.effects['archives_devices/queryDevices'],
  file: upload.fileValue || {},
  imageValue: upload.imgValue || {},
}))
class Outdoor extends React.PureComponent<IProps, any> {
  state = {
    value: null,
    entrance: null,
    fileUrl: '',
  }

  componentDidMount() {

  }

  modifyDevice(url) {
    const { dispatch, tabsKey } = this.props;
    let value;
    switch (tabsKey) {
      case 'outdoorItem':
        value = { outdoorItem: [{ url: url }] }
        break;
      case 'indoorItem':
        value = { indoorItem: [{ url: url }] }
        break;
      case 'autoOutfireItem':
        value = { autoOutfireItem: [{ url: url }] }
        break;
      case 'gasOutfireItem':
        value = { gasOutfireItem: [{ url: url }] }
        break;
      case 'foamSystemItem':
        value = { foamSystemItem: [{ url: url }] }
        break;
      case 'autoFireAlarmSystemItem':
        value = { autoFireAlarmSystemItem: [{ url: url }] }
        break;
      case 'smokeExhaustSystemItem':
        value = { smokeExhaustSystemItem: [{ url: url }] }
        break;
      case 'smokeControlSystemItem':
        value = { smokeControlSystemItem: [{ url: url }] }
        break;
      case 'otherSystemItem':
        value = { otherSystemItem: [{ url: url }] }
        break;
    }
    dispatch({
      type: 'archives_devices/modifyDevice',
      payload: value,
    })
  }

  uploadFile(e) {
    e.persist();
    const { dispatch } = this.props;
    const targetFile = e.target.files[0];
    dispatch({
      type: targetFile.type === 'application/pdf' ? 'upload/uploadFile' : 'upload/uploadImg',
      payload: targetFile
    })
      .then(() => {
        const { file, imageValue } = this.props;
        if (targetFile.type === 'application/pdf') {
          file.message === 'success' && this.setState({ fileUrl: file.url }, () => {
            this.modifyDevice(this.state.fileUrl)
          })
        } else {
          imageValue.message === 'success' && this.setState({ fileUrl: imageValue.url }, () => {
            this.modifyDevice(this.state.fileUrl)
          })
        }
      })
  }

  renderPaper() {
    const { data } = this.props;
    const after = data.url ? data.url.substr(-4, 4) : '';

    return (
      <div style={{ marginTop: '30px' }}>
        <Button style={{ float: 'right' }}>
          <input style={{ opacity: 0, width: 85, height: 30, zIndex: 10, position: 'absolute', cursor: 'pointer', top: '0px', left: '0px' }}
            onChange={(e) => {
              this.uploadFile(e)
            }}
            onClick={(event) => { event.target.value = null }}
            type='file'
          />
          更新附件</Button>
        {after === '.pdf' ? <Resource isImg={false} fileName="纸质台账.pdf" fileUrl={data.url} showDelBtn={false} />
          : <div style={{ marginLeft: '5%' }}>
            <ImgViewer isThumb={true} url={data.url} thumbWidth="80%" thumbHeight="100%" missText="" />
          </div>}
      </div>
    )
  }

  renderForm() {
    const { tabsKey } = this.props;
    switch (tabsKey) {
      case 'outdoorItem':
        return <Outdoors data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'indoorItem':
        return <Indoors data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'autoOutfireItem':
        return <Spray data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'gasOutfireItem':
        return <Gas data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'foamSystemItem':
        return <Foam data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'autoFireAlarmSystemItem':
        return <FireReport data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'smokeExhaustSystemItem':
        return <EmitSmoke data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'smokeControlSystemItem':
        return <PreventSmoke data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
      case 'otherSystemItem':
        return <OtherSys data={this.props.data} onClick={() => this.setState({ entrance: '1' })} />
    }
  }

  render() {
    const { tabsKey, data } = this.props;
    const { entrance } = this.state;

    return (
      <>
        {entrance === '2' ?
          <>{this.renderForm()}</> :
          entrance === '1' ?
            <>
              <Button type="primary"
                style={{ position: 'absolute', right: '5px', top: '45px' }}
                onClick={() => this.setState({ entrance: '2' })}
              >切换到电子台账</Button>
              {this.renderPaper()}
            </>
            :
            <>
              <Entrance image={paper} imageHover={paperSel} title='纸质台账' desc='若已有纸质台账，请拍照或扫描在此处上传，支持pdf、jpg、png文件。'
                tabsKey={tabsKey} uploadFile={data.url ? false : true} setEntrance={() => this.setState({ entrance: '1' })} left='17%' onClick={() => { data.url && this.setState({ entrance: '1' }) }} />
              <Entrance image={elec} imageHover={elecSel} title='电子台账' desc='若已有电子台账文档，请点击进入，按模板上传资料或录入。'
                left='17%' onClick={() => this.setState({ entrance: '2' })} />
            </>
        }
      </>
    )
  }
}


const entrance = Form.create<IProps>()(Outdoor);
export default entrance;